<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="order-box" v-if="order">
      <!-- 售后订单状态 -->
      <refund-status :order="order"></refund-status>

      <view class="page-content">
        <!-- 收件人信息 -->
        <refund-address
          :order="order"
          v-if="order && order.re_address"
        ></refund-address>

        <!-- 快递信息 -->
        <refund-express
          ref="refund_express"
          :order="order"
          v-if="order && order.is_agree == 1"
        ></refund-express>

        <!-- 店铺及商品信息 -->
        <goodsDetail
          :orderitem="order"
          @buyAgain="buyAgain"
          @orderRefund="orderRefund"
          type="refund"
        ></goodsDetail>

        <!-- 售后明细 -->
        <refundSummary :order="order"></refundSummary>
        <!-- 底部按钮 -->
        <refundSubmit :order="order" @btn="handleBtn"></refundSubmit>

        <!-- <view class="order-model">
				<view class="goods-item">
					<view class="goods-img">
						<image :src="order.goods_pic.pic_url" mode="aspectFit"></image>
					</view>
					<view class="goods-info">
						<view class="">
							{{order.name}}
						</view>
						<view
						style="font-size: 24rpx;color: #888;margin-right: 20rpx;display: inline-block"
						v-for="(attr, attr_index) in order.attr" :key="attr_index">
							{{attr.attr_group_name}}：{{attr.attr_name}}
						</view>
						<view class="flex-grow-1 flex-between" style="text-align: right">
							<view>×{{order.num}}</view>
							<view style="color: #ff4544">￥：{{order.total_price}}</view>
						</view>
					</view>
				</view>
			</view> -->

        <!-- <view class="refund-info">
        <view
          >售后类型：{{ order.refund_type == 1 ? "退货退款" : "换货" }}</view
        >
        <view
          >退款金额：
          <text style="color: #ff4544">￥{{ order.refund_price }}</text>
        </view>
        <view>申请原因：{{ order.refund_desc }}</view>
        <view v-if="order.refund_status == 3"
          >拒绝原因 ：
          <text style="color: #ff4544">{{ order.refuse_desc }}</text>
        </view>
        <view class="pic-list">
          <image
            mode="aspectFill"
            v-for="(item, index) in order.refund_pic_list"
            :src="item"
            :key="index"
            style="width: 160rpx; height: 160rpx"
          ></image>
        </view>
      </view> -->

        <!-- <view
        style="padding: 24rpx 24rpx 48rpx"
        v-if="order.is_agree == 1 && order.is_user_send == 0"
      >
        <button @click="sendOrder" style="width: 100%" size="mini" type="warn">
          确认发货
        </button>
      </view> -->
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import refundStatus from '../components/order-refund-detail/refund-status.vue';
import refundAddress from '../components/order-refund-detail/refund-address.vue';
import refundExpress from '../components/order-refund-detail/refund-express.vue';
import goodsDetail from '../components/order-detail/goods-detail.vue';
import refundSummary from '../components/order-refund-detail/refund-summary.vue';
import refundSubmit from '../components/order-refund-detail/refund-submit.vue';

export default {
  data() {
    return {
      order_id: 0,
      order: null,
    };
  },
  components: {
    Shenhe,
    refundStatus,
    refundAddress,
    refundExpress,
    goodsDetail,
    refundSummary,
    refundSubmit,
  },
  onLoad(t) {
    uni.setNavigationBarTitle({
      title: this.$t('title.orderRefundDetail'),
    });
    this.order_id = t.id;
    this.getOrder();
  },
  watch: {},
  methods: {
    getOrder() {
      var that = this;
      this.$allrequest.order
        .refundDetail({
          order_refund_id: that.order_id,
        })
        .then(res => {
          if (res.code == 0) {
            this.order = res.data;
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            });
            setTimeout(function () {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
    },
    sendOrder() {
      var express = this.$refs.refund_express.express;
      var express_no = this.$refs.refund_express.express_no;
      var order_refund_id = this.order.order_refund_id;
      if (express && express_no) {
        this.$allrequest.order
          .refundSend({
            express: express,
            express_no: express_no,
            order_refund_id: order_refund_id,
            orderType: 'STORE',
          })
          .then(res => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            });
            if (res.code == 0) {
              uni.navigateBack({
                delta: 1,
              });
            }
          });
      } else {
        uni.showToast({
          title: this.$t('order.deliveryInfo'),
          icon: 'none',
          duration: 2000,
        });
      }
    },
    handleBtn(e) {
      let that = this;
      if (e == this.$t('order.cancleApp')) {
        uni.showModal({
          title: this.$t('order.prompt'),
          content: this.$t('order.confirmCan'),
          success: function (res) {
            if (res.confirm) {
              that.cancleRefund(that.order.order_refund_id);
            } else if (res.cancel) {
            }
          },
        });
      }
      if (e == this.$t('order.confirmSend')) {
        this.sendOrder();
      }
      if (e == this.$t('diy.contact')) {
        this.$utils.makePhoneCall(this.stores.mobile);
      }
      if (e == this.$t('order.del')) {
        uni.showModal({
          title: this.$t('order.prompt'),
          content: this.$t('mdAdmin.confirmCancle'),
          success: function (res) {
            if (res.confirm) {
              that.deleteRefund(that.order.order_refund_id);
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    // 取消订单
    cancleRefund(id) {
      this.$allrequest.order.cancleRefund({ order_refund_id: id }).then(res => {
        if (res.code == 0) {
          uni.navigateBack({
            delta: 1,
          });
        }
      });
    },
    // 删除订单
    deleteRefund(id) {
      this.$allrequest.order.deleteRefund({ order_refund_id: id }).then(res => {
        if (res.code == 0) {
          uni.navigateBack({
            delta: 1,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #f2f2f2;
  .order-box {
    background-color: #f2f2f2;

    .page-content {
      position: relative;
      z-index: 10;
      top: -24rpx;
    }

    .flex-grow-1 {
      display: flex;
    }
    .flex-between {
      justify-content: space-between;
    }
    view {
      font-size: 32rpx;
    }

    .order-model {
      background: #ffffff;
      padding: 20rpx;
      margin-bottom: 16rpx;
    }
    .order-info > view {
      padding: 8rpx;
    }
    .goods-item {
      display: flex;
      .goods-img {
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        > image {
          width: 200rpx;
          height: 200rpx;
        }
      }
      .goods-info {
        width: 550rpx;
        padding-left: 16rpx;
        box-sizing: border-box;
      }
    }

    .refund-info {
      padding: 20rpx;
      background: #ffffff;
      > view {
        margin-top: 20rpx;
      }
    }
  }
}
</style>
